<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					请选择角色 |
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChangeJiaoses" :value="index" :range="jiaoses">
						<view class="uni-input">{{jiaosesIndex === -1 ? '请选择角色' : jiaoses[jiaosesIndex]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<!-- 老师 -->
		<view class="teacherInfo" v-if="jiaosesIndex === 0">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请输入姓名 |
					</view>
					<view class="uni-list-cell-db">
						<view class="uni-input" style="padding-top: 20rpx;">
							<input type="text" v-model="username" placeholder="请输入您的姓名" />
						</view>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请输入工号 |
					</view>
					<view class="uni-list-cell-db">
						<view class="uni-input" style="padding-top: 20rpx;">
							<input type="text" v-model="schollNum" placeholder="请输入您的工号" />
						</view>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请输入电话 |
					</view>
					<view class="uni-list-cell-db">
						<view class="uni-input" style="padding-top: 20rpx;">
							<input type="text" v-model="phoneNum" placeholder="请输入您的电话号码" />
						</view>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请选择学院 |
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChangeCollege" :value="index" :range="colleges">
							<view class="uni-input">{{ collegesIndex === -1 ? '请选择学院' : colleges[collegesIndex] }}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 学生 -->
		<view class="studentInfo" v-else-if="jiaosesIndex === 1">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请输入姓名 |
					</view>
					<view class="uni-list-cell-db">
						<view class="uni-input" style="padding-top: 20rpx;">
							<input type="text" v-model="username" placeholder="请输入您的姓名" />
						</view>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请输入学号 |
					</view>
					<view class="uni-list-cell-db">
						<view class="uni-input" style="padding-top: 20rpx;">
							<input type="text" v-model="schollNum" placeholder="请输入您的学号" />
						</view>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请输入电话 |
					</view>
					<view class="uni-list-cell-db">
						<view class="uni-input" style="padding-top: 20rpx;">
							<input type="text" v-model="phoneNum" placeholder="请输入您的电话号码" />
						</view>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请选择学院 |
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChangeCollege" :value="index" :range="colleges">
							<view class="uni-input">{{ collegesIndex === -1 ? '请选择学院' : colleges[collegesIndex] }}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请选择专业 |
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChangeProfessional" :value="index" :range="professionals">
							<view class="uni-input">{{professionalIndex === -1 ? '请选择专业' : professionals[professionalIndex]}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请选择年级 |
					</view>
					<view class="uni-list-cell-db">
						<picker mode="multiSelector" @change="bindPickerChangeGradeAndClass" :range="gradeAndClass">
							<view class="uni-input">{{ gradeAndClassInfo ? gradeAndClassInfo : '请选择年级和班级' }}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>	
		<view class="fq-btn" @click="saveInfo">
			保存
		</view>
		
		<Message v-if="isMessage" :msgText="msgText"></Message>
		<loading v-if="isLoading"></loading>
	</view>
</template>

<script>
	
	import loading from "../../commpons/loading.vue"
	import Message from "../../commpons/Message.vue"
	import { addUsersInfo } from "../../network/users.js"
	export default {
		data() {
			return {
				colleges: ['大数据与智能工程学院', '机器人工程学院', '化工学院', '传媒学院', '音乐学院', '财经学院'],
				professionals: ['对口高职', '大数据与云计算', '物联网工程', '网络工程', '软件工程'],
				gradeAndClass: [
					["2017级", "2018级", "2019级"],
					["1班", "2班", "3班"]
				],
				professionalIndex: -1,
				collegesIndex: -1,
				gradeAndClassInfo: '',
				username: '',
				jiaoses: ['教师', '学生'],
				jiaosesIndex: -1,
				schollNum: '',
				phoneNum: '',
				isMessage:false,
				isLoading:false,
				msgText:""
			}
		},
		onLoad() {
			
		},
		computed: {

		},
		methods: {
			bindPickerChangeCollege(e) { //学院
				this.collegesIndex = parseInt(e.target.value);
			},
			bindPickerChangeProfessional(e) { //专业
				this.professionalIndex = parseInt(e.target.value);

			},
			bindPickerChangeGradeAndClass(e) { //年级的班级
				this.gradeAndClassInfo = this.gradeAndClass[0][e.target.value[0]] + " " + this.gradeAndClass[1][e.target.value[1]]

			},
			bindPickerChangeJiaoses(e) { //角色
				this.jiaosesIndex = parseInt(e.target.value);
			},
			
			tipsMsg(Text){
				this.msgText = Text 
				this.isMessage = true;
				this.isLoading = false;
				setTimeout(()=>{
					this.isMessage = false;
				},2000)
			},
			
			saveInfo() {
				this.isLoading = true;
				
				if(this.jiaosesIndex === -1){
					this.tipsMsg("请选择角色");
				}
				
				let data = {}
				if(this.jiaosesIndex === 0){ //教师
					data = {
						username:this.username,
						schollNum:this.schollNum,
						phoneNum:this.phoneNum,
						colleges:this.colleges[this.collegesIndex],
						jiaoses:this.jiaoses[this.jiaosesIndex],
						type:"admin"
					}
				} else if(this.jiaosesIndex === 1){  //学生
					data = {
						username:this.username,
						schollNum:this.schollNum,
						phoneNum:this.phoneNum,
						colleges:this.colleges[this.collegesIndex],
						professional:this.professionals[this.professionalIndex],
						gradeAndClassInfo:this.gradeAndClassInfo,
						jiaoses:this.jiaoses[this.jiaosesIndex],
						type:"user"
					}
				}
				
				//保存
				addUsersInfo(data).then(res=>{
					if (res.data.code === 1) {
						this.tipsMsg("修改成功");
					} else{
						this.tipsMsg("信息错误");
					}
					
				}).catch(err=>{
					this.tipsMsg("服务器繁忙");
				})
			}
		},
		components:{
			Message,
			loading
		}
	}
</script>

<style scoped>
	.uni-list {
		background: #FFFFFF;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		margin-top: 20rpx;
	}

	.uni-list-cell {
		display: flex;
	}

	.uni-list-cell-left {
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.uni-list-cell-db {
		flex: 1;
	}

	.fq-btn {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 14px;
		color: #007AFF;
		width: 100%;
		margin-top: 40rpx;
		background: #FFFFFF;
	}
</style>
